<template>
  <div class="container">
    <el-card>
      <template>
        <div slot="header" class="clearfix">签到活动详情</div>
        <el-row>
          <el-col :span="8">
            <span>签到活动名称：</span>
            <span>{{ detail.name || "-" }}</span>
          </el-col>
          <el-col :span="8">
            <span>签到活动地点：</span>
            <span>{{ detail.activityAddr || "-" }}</span>
          </el-col>
          <el-col :span="8">
            <span>状态：</span>
            <span>{{ detail.status === 1 ? "开启" : "禁用" }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <span>创建时间：</span>
            <span>{{ detail.createTime || "-" }}</span>
          </el-col>
          <el-col :span="8">
            <span>是否问卷调查：</span>
            <span>{{ detail.isSurvey === 1 ? "是" : "否" }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>活动图片:</span>
            <img
              @click="showPreview = true"
              class="my-img"
              :src="detail.activityImageUrl"
              alt=""
            />
          </el-col>
        </el-row>
      </template>
    </el-card>
    <el-dialog :visible.sync="showPreview">
      <div class="my-img2">
        <img :src="detail.activityImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail } from "@/api/signInActivity";
import { Message } from "element-ui";
import { OrderType, page } from "@/utils/enumConfig";

export default {
  name: "SignInActivityDetail",

  data() {
    return {
      OrderType,
      detail: {},
      list: [],
      isLoading: false,
      showPreview: false
    };
  },
  async created() {
    let { id } = this.$route.params,
      _this = this;
    this.id = id;
    let detail = await getDetail({ id });
    if (detail) {
      this.detail = detail;
    }
  },
  methods: {
    async getPayList() {
      let orderId = this.$route.params.id;
      this.isLoading = true;
      this.list = await getPayList({ id: orderId });
      this.isLoading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  ::v-deep .el-dialog__body {
    padding: 0 0 20px;
  }
  .el-row {
    margin-bottom: 20px;
    img {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    .my-img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      cursor: pointer;
    }

    .view {
      color: #1890ff;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.modal-container {
  .item {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 20px 0 0;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
    margin-top: 10px;
    .left {
      margin-left: 20px;
      & > div {
        margin-bottom: 10px;
      }
    }
  }
  .load-more,
  .no-data {
    width: 100%;
    button {
      width: 100%;
      color: #666;
    }
  }
  .no-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #888;
  }
}
.my-img2 {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
